<!docType html>
<html>
<head>
	<meta charset="utf-8">
	<title>The Shape of css</title>
	<style type="text/css">

.clock{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #eee;
	position: relative;
}
.holdR{
	width: 34px;
	height: 34px;
	position: absolute;
	clip: rect(0 34px 34px 17px);
}
.pieR{
	width: 34px;
	height: 34px;
	background-color: #00A3EF;
	border-radius: 50%;
	position: absolute;
	clip: rect(0 34px 34px 17px);
	-webkit-transform: rotate(180deg);
}

.holdL{
	width: 34px;
	height: 34px;
	position: absolute;
	clip: rect(0 17px 34px 0);
}

.pieL{
	width: 34px;
	height: 34px;
	background-color: #00A3EF;
	border-radius: 50%;
	position: absolute;
	clip: rect(0 17px 34px 0);
	-webkit-transform: rotate(180deg);
}

.hole{
	position: absolute;
	top:2px;
	left:2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #fff;
	z-index:99;
}
.line{
	display: none;
	position: absolute;
	width: 10px;
	height: 12px;
	background: url("img/arrow.png");
	top: 9px;
	left: 10px;
}
.arrow{
	position: absolute;
	width: 10px;
	height: 14px;
	background: url("img/arrow.png") 0 -12px;
	top: 8px;
	left: 12px;
}


	</style>
</head>

<body>

	<div class="clock">
		<div class="holdR">
			<div class="pieR"></div>
		</div>
		<div class="holdL">
			<div class="pieL"></div>
		</div>
		<!-- <div class="hole">
			<div class="line"></div>
			<div class="arrow"></div>
		</div> -->
	</div>
	<br>
	percent: <input type="text" id="percent" value="0">
	<button id="refresh">refresh</button>
	<button id="start">start</button>
	<button id="stop">stop</button>

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">




var status = 0; // 0 - stop; 1 - start
var percent = parseInt($("#percent").val())%100;
var timer = null;

var setRotate = function(percent){
	if(percent > 100 || percent < 0){
		return;
	}
	var rotateDeg = percent*3.6;
	if(rotateDeg < 180){
		$(".pieR").css("-webkit-transform", "rotate(" + (180+rotateDeg) + "deg)");
	}
	else if(rotateDeg == 180){
		$(".pieR").css("-webkit-transform", "rotate(" + (360) + "deg)");
	}
	else if(rotateDeg > 180){
		$(".pieR").css("-webkit-transform", "rotate(" + (360) + "deg)");
		$(".pieL").css("-webkit-transform", "rotate(" + (rotateDeg) + "deg)");
	}
}

$("#refresh").on("click", function(event) {
	$(".pieR").css("-webkit-transform", "rotate(" + (180) + "deg)");
	$(".pieL").css("-webkit-transform", "rotate(" + (180) + "deg)");
	var percent = parseInt($("#percent").val())%100;
	console.log(percent)
	setRotate(percent);
});

$("#start").on("click", function() {
	$(".pieR").css("-webkit-transform", "rotate(" + (180) + "deg)");
	$(".pieL").css("-webkit-transform", "rotate(" + (180) + "deg)");
	var percent = parseInt($("#percent").val())%100;
	console.log(percent);
	setRotate(percent);

	timer = setInterval(function(){
		console.log(percent)
		$("#percent").val(percent);
		percent += 1;
		if(percent > 100){
			clearInterval(timer);
			timer = null;
		}
		setRotate(percent);
	},300);
});

$("#stop").on("click", function() {
	clearInterval(timer);
	timer = null;
});



$(".hole").on("click", function() {
	console.log(status);
	// stop -> start
	if(percent >= 100){
		return;
	}
	if(status == 0){
		$(".arrow").hide();
		$(".line").show();
		status = 1;

		console.log(percent);
		setRotate(percent);

		timer = setInterval(function(){
			console.log(percent)
			$("#percent").val(percent);
			percent += 1;
			if(percent > 100){
				clearInterval(timer);
				timer = null;
			}
			setRotate(percent);
		},30);
	}
	// start -> stop
	else if(status == 1){
		$(".arrow").show();
		$(".line").hide();
		status = 0;
		clearInterval(timer);
		timer = null;
	}
});


	</script>
</body>

</html>